<template>
	<view class="page">
		<view class="form">
			<input class="ipt" v-model="form.name" placeholder="姓名" />
			<input class="ipt" v-model="form.school" placeholder="学校" />
			<input class="ipt" v-model="form.phone" placeholder="联系方式" />

			<view class="sec-title">擅长标签</view>
			<view class="tags">
				<view class="tag" :class="{on:form.tags.includes(t)}" v-for="t in tagOptions" :key="t" @tap="toggleTag(t)">{{t}}</view>
			</view>

			<view class="sec-title">空闲时间</view>
			<view class="tags">
				<view class="tag" :class="{on:form.times.includes(t)}" v-for="t in timeOptions" :key="t" @tap="toggleTime(t)">{{t}}</view>
			</view>
		</view>
		<button class="submit" @tap="submit">提交注册</button>
	</view>
</template>

<script>
export default{
	data(){
		return{
			form:{name:'',school:'',phone:'',tags:[],times:[]},
			tagOptions:['教手机操作','教微信使用','陪同就医','买药取药','生活缴费'],
			timeOptions:['工作日晚上','周末上午','周末下午','周末晚上']
		}
	},
	methods:{
		toggleTag(t){const i=this.form.tags.indexOf(t); i>-1?this.form.tags.splice(i,1):this.form.tags.push(t)},
		toggleTime(t){const i=this.form.times.indexOf(t); i>-1?this.form.times.splice(i,1):this.form.times.push(t)},
		submit(){ uni.showToast({ title:'注册成功（演示）', icon:'none' }) }
	}
}
</script>

<style scoped>
.page{min-height:100vh;background:#fff;padding:24rpx}
.form{display:flex;flex-direction:column;gap:16rpx}
.ipt{height:80rpx;background:#f7f7f7;border-radius:12rpx;padding:0 16rpx}
.sec-title{margin-top:12rpx;font-size:30rpx;color:#333}
.tags{display:flex;flex-wrap:wrap;gap:12rpx;margin-top:8rpx}
.tag{min-width:160rpx;height:72rpx;border-radius:12rpx;background:#fafafa;display:flex;align-items:center;justify-content:center}
.on{background:#e6f7ff;color:#1677ff}
.submit{margin-top:20rpx;background:#1677ff;color:#fff}
</style>

